<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-06-28 13:52:25
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 14:34:16
-->
<div class="path">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>设计配套表导入</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="p-formgroup-inline">
                    <span class="p-field">
                        <p-button *ngIf="'Pages.ImportTable.BOMAddition' | permission" label="BOM新增" (onClick)="add()"></p-button>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <p-button *ngIf="'Pages.ImportTable.BOMImport' | permission" label="BOM引入" (onClick)="bomImport()"></p-button>
                    </span>
                    <!-- <span class="p-field" style="margin-left: 20px;">
                    <p-button label="BOM送审" (onClick)="addOrUpdate()"></p-button>
                </span> -->
                    <span class="p-field" style="margin-left: 20px;">
                        <span class="input-lable" style="margin-right: 20px;">图号：</span>
                        <input style="line-height: 24px!important;width: 200px;" id="model" type="text" size="30"
                            pInputText [(ngModel)]="model">
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable" style="margin-right: 20px;">名称：</span>
                        <input style="line-height: 24px!important;width: 200px;" id="lotNo" type="text" size="30"
                            pInputText [(ngModel)]="lotNo">
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable" style="margin-right: 20px;">型号：</span>
                        <input style="line-height: 24px!important;width: 200px;" id="drawingNo" type="text" size="30"
                            pInputText [(ngModel)]="drawingNo">
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable" style="margin-right: 20px;">发次：</span>
                        <input style="line-height: 24px!important;width: 200px;" id="deleverTiems" type="text" size="30"
                            pInputText [(ngModel)]="deleverTiems">
                    </span>
                    <p-button label="查询" (onClick)="getTableList()" class="ml"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                </div>
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow"
                            dataKey="id">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 3em"></th>
                                    <th style="width: 150px">操作</th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 120px">型号</th>
                                    <th style="width: 120px">发次</th>
                                    <th style="width: 150px">图号</th>
                                    <th style="width: 150px">名称</th>
                                    <th style="width: 150px">类别</th>
                                    <th style="width: 150px">创建人</th>
                                    <th style="width: 150px">创建日期</th>
                                    <th style="width: 150px">火箭状态</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 3em">
                                        <p-tableRadioButton [value]="record"></p-tableRadioButton>
                                    </td>
                                    <td style="width: 150px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.ImportTable.Resume' | permission" href="javascript:;" (click)="lookResume(record)">履历</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ImportTable.BOMMaintenance' | permission" href="javascript:;" (click)="addOrUpdate(record)">Bom维护</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ImportTable.BOMView' | permission" href="javascript:;" (click)="look(record)">Bom查看</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ImportTable.Export' | permission" href="javascript:;" (click)="export(record)">导出</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 120px">{{record.model}}</td>
                                    <td style="width: 120px">{{record.sendTime}}</td>
                                    <td style="width: 150px">{{record.materialNo}}</td>
                                    <td style="width: 150px">{{record.materialName}}</td>
                                    <td style="width: 150px">{{record.materialTypeName}}</td>
                                    <td style="width: 150px">{{record.createUser}}</td>
                                    <td style="width: 150px">{{record.creationTime | momentFormat:'YYYY-MM-DD
                                        HH:mm:ss'}}</td>
                                    <td style="width: 150px">{{record.rocketState}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看履历 -->
    <app-show-resume #showResume [parentInfo]="rowdata"></app-show-resume>
    <!-- Bom查看 -->
    <bomLook #bomLook [editData]="rowdata" [title]="title" (modalSave)="getTableList()"></bomLook>
    <!-- 新增或修改 -->
    <addOrEditPath #addOrEditPath [editData]="rowdata" [title]="title" (modalSave)="getTableList()"> </addOrEditPath>
    <!-- BOM引入 -->
    <p-dialog class="import-dialog" header="BOM引入" [(visible)]="importBom" modal="modal" [responsive]="true"
        [style]="{width: '800px', height: '460px'}">
        <div class="modal-body">
            <div class="row align-items-center">
                <div class="primeng-datatable-container">
                    <p-table [value]="importData" [paginator]="false" [lazy]="true" [scrollable]="true"
                        ScrollWidth="100%" [(selection)]="selectImport" dataKey="id">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width: 3em"></th>
                                <th style="width: 50px">序号</th>
                                <th style="width: 150px">型号</th>
                                <th style="width: 120px">发次</th>
                                <th style="width: 150px">图号</th>
                                <th style="width: 150px">名称</th>
                                <th style="width: 150px">类别</th>
                                <th style="width: 120px">设计BOM版本</th>
                                <th style="width: 120px">BOM状态</th>
                                <th style="width: 150px">创建人</th>
                                <th style="width: 150px">创建日期</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                            <tr>
                                <td style="width: 3em">
                                    <p-tableRadioButton [value]="record"></p-tableRadioButton>
                                </td>
                                <td style="width: 50px">{{rowIndex+1}}</td>
                                <td style="width: 150px">{{record.model}}</td>
                                <td style="width: 120px">{{record.sendTime}}</td>
                                <td style="width: 150px">{{record.materialNo}}</td>
                                <td style="width: 150px">{{record.materialName}}</td>
                                <td style="width: 150px">{{record.materialTypeName}}</td>
                                <td style="width: 120px">{{record.versionNo}}</td>
                                <td style="width: 120px">{{record.status}}</td>
                                <td style="width: 150px">{{record.createUser}}</td>
                                <td style="width: 150px">{{record.creationTime | momentFormat:'YYYY-MM-DD
                                    HH:mm:ss'}}
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </div>
        </div>
        <div class="modal-footer" style="margin-top: 14px;justify-content: center;">
            <button [disabled]=" selectImport == null" pButton type="button" label="引入" (click)="importSave()"></button>
        </div>
    </p-dialog>
    <!-- 新增弹窗 -->
    <form #bopForm="ngForm" novalidate autocomplete="off">
        <p-dialog class="dialog" header="新增" [(visible)]="addParent" (onHide)="closeParent($event)"
            [style]="{width: '800px', height: '500px'}" modal="modal" [responsive]="true">
            <div class="modal-body" *ngIf="addParent" style="height: 400px;">
                <div class="form-group" style="display: flex;">
                    <label for="model" style="margin-top: 7px;margin-right: 10px;width: 63.72px;">型号*</label>
                    <p-dropdown required name="addModel" #materialModelInput="ngModel" [options]="modelOptions"
                        [(ngModel)]="addForm.materialModel" (onChange)="onChange($event)">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                    {{select.label}}</div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="materialModelInput"></validation-messages>
                    <label for="materialType" style="margin-left: 100px;margin-top: 7px;margin-right: 10px;width: 63.72px;">发次*</label>
                    <p-dropdown required name="sendTime" #sendTimeInput="ngModel" [options]="sendTimeOptions"
                        [(ngModel)]="addForm.sendTime" (onChange)="getMaterialCode($event)">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                    {{select.label}}</div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="sendTimeInput"></validation-messages>
                </div>
                <div class="form-group" style="display: flex;">
                    <label for="materialCode" style="margin-top: 7px;margin-right: 10px;width: 63.72px;">图号*</label>
                    <input name="addmaterialCode" style="width: 200px;" id="addmaterialCode"
                        #materialCodeInput="ngModel" type="text" class="form-control" [(ngModel)]="addForm.materialCode"
                        maxlength="256" required />
                    <validation-messages [formCtrl]="materialCodeInput"></validation-messages>
                    <label for="materialname" style="margin-top: 7px;margin-left: 100px;margin-right: 10px;width: 63.72px;">名称*</label>
                    <input name="addmaterialname" style="width: 200px;" id="addmaterialname"
                        #materialnameInput="ngModel" type="text" class="form-control" [(ngModel)]="addForm.materialname"
                        maxlength="256" required />
                    <validation-messages [formCtrl]="materialnameInput"></validation-messages>
                </div>
                <div class="form-group" style="display: flex;">
                    <label for="materialProperties" style="margin-top: 7px;margin-right: 10px;width: 63.72px;">属性*</label>
                    <p-dropdown required name="addmaterialProperties" #materialPropertiesSelect="ngModel"
                       disabled [options]="materialPropertiesOption" [(ngModel)]="addForm.materialProperties">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                    {{select.label}}</div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="materialPropertiesSelect"></validation-messages>
                    <label style="margin-top: 5px; margin-left: 100px;" for="isUsed">是否启用*</label>
                    <p-toggleButton name="isUsed" style="margin-left: 10px" [(ngModel)]="addForm.isUsed" onLabel="启用"
                        offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'150px'}">
                    </p-toggleButton>
                </div>
                <div class="form-group">
                    <label for="remark">备注</label>
                    <input style="margin-left: 10px;" id="remark" type="text" name="remark" class="form-control"
                        [(ngModel)]="addForm.remark" maxlength="256" />
                </div>
            </div>
            <div class="modal-footer" style="margin-top: 14px;justify-content: center;">
                <button [disabled]="!bopForm.form.valid" style="margin-left: 20px;" pButton type="button" label="保存"
                    (click)="addSave()"></button>
            </div>
        </p-dialog>
    </form>

</div>